<template>
	<widget-root :styles="styles" :class="themeName">
		<view class="user-info flex-col" :class="isLogin ? 'bg_75' : ''" :style="[infoStyle]">
			<!-- #ifndef  H5 -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<u-navbar :is-back="false" :title="title" :title-bold="true" :is-fixed="false" :border-bottom="false"
					:background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
					:title-color="percent > 0.5 ? '#000' : '#fff'"></u-navbar>
			</u-sticky>
			<!-- #endif -->
			<view class="user-top flex-1">
				<view class="flex" v-if="isLogin">
					<router-link to="/bundle/pages/user_profile/user_profile">
						<image class="icon-avatar" :src="userInfo.avatar" />
					</router-link>
					<view class="m-l-30 flex-1">
						<view class="xxl white" v-if="userInfo.nickname">
							{{ userInfo.nickname }}
						</view>
						<view class="flex user-id m-t-10" v-if="userInfo.sn && content.show_user_sn">
							<view class="xs m-r-20 white" @tap.stop="$copy(userInfo.sn)">ID: {{ userInfo.sn }}</view>
							<view class="xs vip-btn m-l-5 white">会员</view>
						</view>
					</view>
				</view>
				<router-link v-else to="/pages/login/login">
					<view class="flex white">
						<image class="icon-avatar"
							:src="content.avatar_type == 2 && content.avatar ? $getImageUri(content.avatar) : require('@/static/images/icon_portrait.png')"
							mode="" />
						<view class="m-l-20 flex-1">
							<view class="xxl">
								点击登录
							</view>
							<view class="xs">登录体验更多功能</view>
						</view>
					</view>
				</router-link>
			</view>
			<!-- <view class="assets-nav white flex">
				<router-link class="flex-1" to="/bundle/pages/user_wallet/user_wallet" v-if="showAssets(1)">
					<view class="flex-col col-center">
						<view class="number">{{ userInfo.user_money || 0 }}</view>
						<view>红色积分</view>
					</view>
				</router-link>

				<router-link class="flex-1" to="/bundle/pages/user_sign/user_sign" v-if="showAssets(2)">
					<view class="flex-col col-center">
						<view class="number">{{ userInfo.user_integral || 0 }}</view>
						<view>消费积分</view>
					</view>
				</router-link>
				<router-link class="flex-1" to="/bundle/pages/coupon/coupon" v-if="showAssets(3)">
					<view class="flex-col col-center">
						<view class="number">{{ userInfo.coupon || 0 }}</view>
						<view>现金资产</view>
					</view>
				</router-link>
				<router-link class="flex-1" to="/bundle/pages/goods_collects/goods_collects" v-if="showAssets(4)">
					<view class="flex-col col-center">
						<view class="number">{{ userInfo.collect || 0 }}</view>
						<view>数字资产</view>
					</view>
				</router-link>
				<router-link class="flex-1" to="/bundle/pages/goods_collects/goods_collects" v-if="showAssets(5)">
					<view class="flex-col col-center">
						<view class="number">{{ userInfo.collect || 0 }}</view>
						<view>其他资产</view>
					</view>
				</router-link>
			</view> -->
			<view v-if="isLogin" class="data-nav">
				<router-link to="/bundle/pages/user_green_integral/user_green_integral" v-if="showAssets(1)">
				<view class="top">
					<p>
						{{ fixed(userInfo.green_integral)[0] }}
						<span>{{ fixed(userInfo.green_integral)[1] }}</span>
					</p>
					
					<p>绿色积分</p>
				</view>
				</router-link>
				
				
				<view class="assets-nav">
					<router-link to="/bundle/pages/user_red_integral/user_red_integral" v-if="showAssets(1)">
						<view class="item">
							<view class="number">
								{{ fixed(userInfo.red_integral)[0] }}
								<span>{{ fixed(userInfo.red_integral)[1] }}</span>
							</view>
							<view class="title">红色积分</view>
						</view>
					</router-link>
					<router-link to="/bundle/pages/user_buy_account/user_buy_account" v-if="showAssets(2)">
						<view class="item">
							<view class="number">
								{{ fixed(userInfo.buy_account)[0] }}
								<span>{{ fixed(userInfo.buy_account)[1] }}</span>
							</view>
							<view class="title">消费积分</view>
						</view>
					</router-link>
					<router-link to="/bundle/pages/user_wallet/user_wallet" v-if="showAssets(3)">
						<view class="item">
							<view class="number">
								<span>￥</span>
								{{ fixed(userInfo.user_earnings)[0] }}
								<span>{{ fixed(userInfo.user_earnings)[1] }}</span>
							</view>
							<view class="title">现金资产</view>
						</view>
					</router-link>
					<router-link to="/bundle/pages/user_number_account/user_number_account" v-if="showAssets(4)">
						<view class="item">
							<view class="number">
								<span>￥</span>
								{{ fixed(userInfo.number_account)[0] }}
								<span>{{ fixed(userInfo.number_account)[1] }}</span>
							</view>
							<view class="title">数字资产</view>
						</view>
					</router-link>
					<router-link to="/bundle/pages/user_other_account/user_other_account" v-if="showAssets(5)">
						<view class="item">
							<view class="number">
								<span>￥</span>
								{{ fixed(userInfo.other_account)[0] + '.' }}
								<span>{{ fixed(userInfo.other_account)[1] }}</span>
							</view>
							<view class="title">其他资产</view>
						</view>
					</router-link>
				</view>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
export default {
	props: {

		content: {
			type: [Object, Array]
		},
		styles: {
			type: [Object, Array]
		},
		percent: {
			type: Number,
			default: 0
		},
		title: {
			type: String,
			default: "个人中心"
		}
	},
	data() {
		return {
			// 积分
			integral:0
		}
	},
	methods: {
		fixed(num = '') {
			if (!num) return ['0.', '00']
			let numArr = num.split('.')
			numArr[0] += '.'
			return numArr
		}
	},

	computed: {
		showAssets() {
			return (type) => {
				return this.content.assets.includes(type)
			}
		},
		infoStyle() {
			const {
				background_image,
				background_type
			} = this.content
			if (!background_image || background_type == 1) {
				return {}
			}
			return {
				'background-image': `url(${this.$getImageUri(this.content.background_image)})`,
			}
		}
	}
};
</script>

<style lang="scss" scoped>
*{
	font-family:  Microsoft YaHei, Microsoft YaHei;
}

.bg_75{
	background-size: 100% 75% !important;
}

.user-info {
	@include background_image(90deg, 0%, 100%, '../../../static/images/bg_user.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-sizing: border-box;

	.user-top {
		margin-top: 35rpx;
		padding: 0 30rpx;
		// #ifdef  H5
		padding-top: 30rpx;

		// #endif
		.icon-avatar {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			border: 1px solid #f8f8f8;
		}

		.user-id {
			display: inline-flex;

			.vip-btn {
				padding: 3rpx 10rpx;
				border-radius: 4rpx;
				font-size: 20rpx;
				border: 1px solid #fff;
			}
		}
	}
}

.data-nav {
	background: #fff;
	border-radius: 12rpx;
	margin: 20rpx 20rpx 0 20rpx;
	padding: 25rpx;

	.top {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #57BE6A;

		p {
			&:nth-child(1) {
				font-weight: bold;
				font-size: 52rpx;
				margin-bottom: 8rpx;
			}

			&:nth-child(2) {
				font-size: 28rpx;
			}
		}
	}

	.assets-nav {
		margin-top: 25rpx;
		display: flex;
		justify-content: space-between;
		color: #000;
		flex-wrap: wrap;
		gap: 25rpx 15rpx;

		.item {
			.number {
				font-weight: bold;
				font-size: 30rpx;

				span {
					font-size: 20rpx;
				}
			}
		}

		.title {
			font-size: 20rpx;
			margin-top: 13rpx;
		}
	}
}
</style>
